import {
  DatePicker,
  Form,
  FormItem,
  Input,
  message,
  Modal
} from 'ant-design-vue'
import { defineComponent, isVNode, ref } from 'vue'

import { materialApi } from '@/apis'
import { isValueEmpty } from '@/utils'

type ReqData = {
  activityContent: string
  onNewTime: number
  timeTemp: string
  productName: string
  tips: string
}

export default defineComponent({
  name: 'NewsUpMsgDialog',

  setup(props, { emit }) {
    const showDlg = ref(false)
    const reqData = ref({} as ReqData)
    const confirmLoading = ref(false)

    function show() {
      reqData.value = {} as ReqData
      showDlg.value = true
    }

    //确定
    async function confirm() {
      if (isValueEmpty(reqData.value.activityContent)) {
        message.error('请输入活动内容')
        return
      }
      if (isValueEmpty(reqData.value.productName)) {
        message.error('请输入商品名称')
        return
      }
      if (isValueEmpty(reqData.value.timeTemp)) {
        message.error('请选择上新时间')
        return
      }
      reqData.value.onNewTime = new Date(reqData.value.timeTemp).valueOf()
      if (isValueEmpty(reqData.value.tips)) {
        message.error('请输入温馨提示')
        return
      }
      try {
        confirmLoading.value = true
        await materialApi.sendNewGoodsMsg(reqData.value)
        message.success('发起推送成功')
        showDlg.value = false
      } finally {
        confirmLoading.value = false
      }
    }

    return {
      showDlg,
      reqData,
      show,
      confirm,
      confirmLoading
    }
  },
  render() {
    return (
      <Modal
        v-model:visible={this.showDlg}
        title="上新推送"
        destroyOnClose
        width={500}
        confirmLoading={this.confirmLoading}
        onOk={this.confirm}
      >
        <div style={{ color: '#aaaaaa' }}>
          将会推送给已授权获取上新通知的用户
        </div>
        <Form labelCol={{ span: 5 }} style={{ marginTop: '15px' }}>
          <FormItem label={'活动内容'} required>
            <Input
              style={{ width: '300px' }}
              v-model:value={this.reqData.activityContent}
              placeholder="请输入"
              maxlength={20}
              v-slots={{
                suffix: () => (
                  <span>{this.reqData.activityContent?.length || 0}/20</span>
                )
              }}
            />
          </FormItem>
          <FormItem label={'商品名称'} required>
            <Input
              style={{ width: '300px' }}
              v-model:value={this.reqData.productName}
              placeholder="请输入"
              maxlength={20}
              v-slots={{
                suffix: () => (
                  <span>{this.reqData.productName?.length || 0}/20</span>
                )
              }}
            />
          </FormItem>
          <FormItem label={'上新时间'} required>
            <DatePicker
              v-model:value={this.reqData.timeTemp}
              placeholder="请选择"
              showTime
            />
          </FormItem>
          <FormItem label={'温馨提示'} required>
            <Input
              style={{ width: '300px' }}
              v-model:value={this.reqData.tips}
              placeholder="请输入"
              maxlength={20}
              v-slots={{
                suffix: () => <span>{this.reqData.tips?.length || 0}/20</span>
              }}
            />
          </FormItem>
        </Form>
      </Modal>
    )
  }
})
